<template>
  <v-app>
    <v-navigation-drawer app dark v-model="drawer">
      <v-list dense nav class="py-0">
        <v-list-item two-line>
          <v-list-item-avatar>
            <img src="https://randomuser.me/api/portraits/men/81.jpg" />
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>Jizhi</v-list-item-title>
            <v-list-item-subtitle>Shenzhen Jizhi Technology Co. , Ltd</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>

      <v-divider></v-divider>

      <v-list shaped>
        <v-list-item-group>
          <v-list-item v-for="(item, i) in drawerList" :key="i" :to="item.link">
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app elevate-on-scroll dark>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>{{pageTitle}}</v-toolbar-title>

      <v-spacer></v-spacer>
    </v-app-bar>

    <v-main>
      <v-container fluid style="padding:0;">
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer dark padless>
      <v-card flat tile class="indigo lighten-1 white--text text-center">
        <v-card-text>
          <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
            <v-icon size="24px">{{ icon }}</v-icon>
          </v-btn>
        </v-card-text>

        <v-card-text
          class="white--text pt-0"
        >Become a global outstanding drone product and technical service provider.Become a global outstanding drone product and technical service provider.Become a global outstanding drone product and technical service provider.Become a global outstanding drone product and technical service provider.</v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          {{ new Date().getFullYear() }} —
          <strong>NL</strong>
        </v-card-text>
      </v-card>
    </v-footer>
  </v-app>
</template>

<script>
const drawerList = [
  {
    text: "Home",
    icon: "mdi-home",
    link: "/home"
  },
  {
    text: "Product",
    icon: "mdi-tag",
    link: "/product"
  },
  {
    text: "Service",
    icon: "mdi-face-agent",
    link: "/service"
  },
  {
    text: "About",
    icon: "mdi-information",
    link: "/about"
  }
];
export default {
  data() {
    return {
      drawer: false,
      drawerList: drawerList,
      icons: [
        "mdi-wechat",
        "mdi-facebook",
        "mdi-twitter",
        "mdi-linkedin",
        "mdi-instagram"
      ]
    };
  },
  computed: {
    pageTitle() {
      return this.$route.meta.title;
    }
  }
};
</script>